<template>
  <div>
    <div class="question" v-for="(item, index) in question" :key="index" v-show="index === idx">
      <p>
        <span v-if="item.ismultiple" class="text-primary">多选 </span>
        <span v-else class="text-primary">单选 </span>
        <span>{{ item.name }}</span>
        <span class="text-danger" v-show="answerShow"> 答案：{{ item.answer }}</span>
        <span style="float: right;">{{ idx + 1 }}/{{ question.length }}</span>
      </p>
      <div>
        <div
          :class="val.checked ? 'bgc' : ''"
          v-for="val in item.option"
          :key="val.id"
          class="list"
          @click="handleClick(val)"
        >
          {{ val.letter }}. {{ val.name }}
        </div>
      </div>
    </div>
    <div>
      <base-button @click="back()"
                   :style="idx === 0 ? 'background-color:#fffff;' : ''"
                   :disabled="idx === 0 ? true : false"
                   class="animation-on-hover" type="info">
        上一题
      </base-button>
      <base-button @click="next()"
                   :style="idx === question.length - 1 ? 'background-color:#fffff;' : ''"
                   :disabled="idx === question.length - 1 ? true : false"
                   class="animation-on-hover" type="info">
        下一题
      </base-button>
      <base-button @click="submit()"
                   class="animation-on-hover" type="primary">
        提交
      </base-button>
      <base-button v-show="isshow"
                   @click="answerShow = true"
                   class="animation-on-hover" type="warning">
        查看答案
      </base-button>
    </div>
  </div>
</template>

<script>
import NotificationTemplate from "@/pages/Notifications/NotificationTemplate.vue";

export default {
  components: {
    NotificationTemplate
  },
  data() {
    return {
      idx: 0,
      allScore: 0,
      isshow: false,
      answerShow: false,
      ismultipleAnswer: [],
      question: [
        {
          id: 1,
          ismultiple: false,
          name: '今天星期几?',
          answer: 'A',
          score: 2,
          option: [
            {id: 1, name: '星期一', checked: false, letter: 'A'},
            {id: 2, name: '星期三', checked: false, letter: 'B'},
            {id: 3, name: '星期四', checked: false, letter: 'C'},
          ],
        },
        {
          id: 2,
          ismultiple: false,
          name: '你喜欢吃什么?',
          answer: 'C',
          score: 2,
          option: [
            {id: 1, name: '香蕉', checked: false, letter: 'A'},
            {id: 2, name: '苹果', checked: false, letter: 'B'},
            {id: 3, name: '橘子', checked: false, letter: 'C'},
          ],
        },
        {
          id: 3,
          ismultiple: false,
          name: '你的梦想是什么?',
          answer: 'B',
          score: 2,
          option: [
            {id: 1, name: '当一名程序员', checked: false, letter: 'A'},
            {id: 2, name: '当一名测试员', checked: false, letter: 'B'},
            {id: 3, name: '当一名运维', checked: false, letter: 'C'},
          ],
        },
        {
          id: 4,
          ismultiple: true,
          name: '这是一题多选吗?',
          answer: 'BC',
          score: 2,
          option: [
            {id: 1, name: '不是', checked: false, letter: 'A'},
            {id: 2, name: '是的', checked: false, letter: 'B'},
            {id: 3, name: '是的', checked: false, letter: 'C'},
          ],
        },
        {
          id: 5,
          ismultiple: true,
          name: '是多选吧?',
          answer: 'ABC',
          score: 2,
          option: [
            {id: 1, name: '是的', checked: false, letter: 'A'},
            {id: 2, name: '是的', checked: false, letter: 'B'},
            {id: 3, name: '是的', checked: false, letter: 'C'},
          ],
        },
      ],
    };
  },
  methods: {

    next() {
      this.idx++;
    },
    back() {
      this.idx--;
    },
    handleClick(info) {
      let question = this.question[this.idx];
      let option = this.question[this.idx].option;

      option.forEach((item) => {
        if (item.id === info.id) {
          item.checked = !item.checked;
        } else if (!question.ismultiple) {
          item.checked = false;
        }
      });

      let isAnswer = info.letter;
      let answer = this.question[this.idx].answer;

      if (question.ismultiple) {
        this.ismultipleAnswer = [];
        option.forEach((item) => {
          if (item.checked) {
            this.ismultipleAnswer.push(item.letter);
          }
        });
        isAnswer = this.ismultipleAnswer.join('');
      }

      console.log('选中的答案', isAnswer);
      console.log('题目的答案', answer);

      if (isAnswer === answer) {
        this.question[this.idx].isOk = true;
      } else {
        this.question[this.idx].isOk = false;
      }
    },
    submit() {
      this.allScore = 0;
      let result = [];
      this.question.forEach((item) => {
        let selectedArr = item.option.map((val) => {
          if (val.checked) {
            return val.checked;
          }
        });
        const isTrue = selectedArr.includes(true);
        if (isTrue) {
          result.push(isTrue);
        }

        if (item.isOk) {
          this.allScore += item.score;
        }
      });

      if (result.length < this.question.length) {
        alert('还有题目没做呢');
        return;
      }

      setTimeout(() => {
        alert('获得分数：' + this.allScore);
        this.isshow = true;
      }, 100);
    },
  },
};
</script>

<style scoped>
* {
  padding: 0;
  box-sizing: border-box;
}

.question {
  width: auto;
  padding: 10px;
  color: rgb(81, 81, 82);
  font-size: 12px;
}

button {
  margin-top: 15px;
  margin-right: 10px;
  outline: none;
  background-color: rgb(33, 157, 248);
  border: 0;
  padding: 10px;
  font-weight: 500 !important;
}

button:active {
  background-color: rgb(44, 60, 66);
}

.list {
  margin-top: 10px;
  padding: 10px 5px;
  font-size: 16px;
}

.bgc {

  color: #FFFFFF;
  background-color: #419EF9;
}

.answer {
  color: #E14ECA;
  font-size: 18px;
  margin-left: 20px;
}

button {
  margin-left: 1rem !important;

}

.question p span {
  font-size: 18px;
  font-weight: 400;
}
</style>
